import { Component, OnInit, Renderer2, ElementRef, Input, Output, EventEmitter } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ControlValueAccessor } from '@angular/forms';

export declare type RateMapItem = {
  color: string;
  class: string;
};
export declare type RateMap = {
  low: RateMapItem;
  high: RateMapItem;
  medium: RateMapItem;
  void: RateMapItem;
  disabled: RateMapItem;
};

@Component({
  selector: 'el-rate',
  templateUrl: './rate.component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: RateComponent,
    multi: true
  }],
})
export class RateComponent implements OnInit, ControlValueAccessor {
  @Input() disabled: boolean = false;
  @Input() max: number = 5;
  @Input() colors: Array<string> = ['#F7BA2A', '#F7BA2A', '#F7BA2A'];
  @Input('void-color') voidColor: string = '#C6D1DE';
  @Input('icon-classes') iconClasses: Array<string> = ['el-icon-star-on', 'el-icon-star-on', 'el-icon-star-on'];
  @Input('void-icon-class') voidIconClass: string = 'el-icon-star-off';
  @Input('disabled-void-color') disabledVoidColor: string = '#EFF2F7';
  @Input('disabled-void-icon-class') disabledVoidIconClass: string = 'el-icon-star-on';
  @Input('low-threshold') lowThreshold: number = 2;
  @Input('high-threshold') highThreshold: number = 4;
  @Input('show-text') showText: boolean = false;
  @Input('show-score') showScore: boolean = false;
  @Input('text-color') textColor: string = '#1F2D3D';
  @Input() texts: Array<string> = ['极差', '失望', '一般', '满意', '惊喜'];
  @Input() model: number = 0;
  @Input() allowHalf: boolean = false;
  
  @Input() modelChange: EventEmitter<any> = new EventEmitter();
  private sanitizer: any;
  private renderer: any;
  private controlChange = function () { };
  private controlTouch = function () { };
  @Input() rateIcon!: ElementRef;
  @Input() scores: any = [];
  @Input() rateMap!: RateMap;
  @Input() backupModel: number = 0;
  constructor(sanitizer: DomSanitizer, renderer: Renderer2) {
    this.sanitizer = sanitizer;
    this.renderer = renderer;
  }

  writeValue(obj: any): void {
    this.model = obj;
  }
  registerOnChange(fn: any): void {
    this.controlChange = fn;
  }
  registerOnTouched(fn: any): void {
    this.controlTouch = fn;
  }

  ngOnInit(): void {
    this.scores = new Array(this.max).fill('');
    this.backupModel = this.model;
    this.rateMap = {
      low: { color: this.colors[0], class: this.iconClasses[0] },
      medium: { color: this.colors[1], class: this.iconClasses[1] },
      high: { color: this.colors[2], class: this.iconClasses[2] },
      void: { color: this.voidColor, class: this.voidIconClass },
      disabled: { color: this.disabledVoidColor, class: this.disabledVoidIconClass },
    };
  }


  hoverToggle(_a: any, index: number, reset?: boolean) {
    if(this.disabled) {
      return ;
    }
    var srcElement = _a.srcElement;
    if (reset === void 0) { reset = false; }
    if (this.disabled)
      return;
    var /** @type {?} */ iconElement = srcElement.tagName === 'I' ? srcElement : srcElement.children[0];
    if (reset) {
      this.model = this.backupModel;
      this.renderer.removeClass(iconElement, 'hover');
    }
    else {
      this.model = index;
      this.renderer.addClass(iconElement, 'hover');
    }
  }


  selectValue(index: number) {
    if (this.disabled)
      return;
    this.model = this.backupModel = index;
    this.modelChange.emit(index);
    this.controlChange;
  }


  makeIconClasses(index: number) {
    var /** @type {?} */ voidClass = this.disabled ? this.rateMap.disabled.class : this.rateMap.void.class;
    var /** @type {?} */ activeItem = this.findCurrentType(this.model, this.rateMap);
    var /** @type {?} */ classes = index <= this.model ? activeItem.class : voidClass;
    return 'el-rate__icon ' + classes;
  }


  makeIconStyles(index: number) {
    var /** @type {?} */ voidColor = this.disabled ? this.rateMap.disabled.color : this.rateMap.void.color;
    var /** @type {?} */ activeItem = this.findCurrentType(this.model, this.rateMap);
    var /** @type {?} */ styles = "color: " + (index <= this.model ? activeItem.color : voidColor) + ";";
    return this.sanitizer.bypassSecurityTrustStyle(styles);
  }

  findCurrentType(index: number, rateMap: any) {
    if (index <= this.lowThreshold)
      return rateMap.low;
    if (index >= this.highThreshold)
      return rateMap.high;
    return rateMap.medium;
  }

 
}
